var vm = new Vue({
    el:'#rrapp',
    data:{
        dataArea:{},
    },
    methods: {
        echarts_1:function() {
            $.getJSON(baseURL + "water/water/tdataerr2021/queryArea", function(r){
                let dataSet = [ ['product', '设备数（单位：万）', '超期小区数（单位：个）','超期设备数（单位：万）', '故障率（百分比：%）']];

                $.each(r,function(index,item){
                    let dataItem =[];
                    dataItem.push(item.areaName);
                    dataItem.push(item.deviceCount/10000);
                    dataItem.push(item.overCount);
                    dataItem.push(item.overDeviceCount/10000);
                    dataItem.push(item.rateErr);

                    dataSet.push(dataItem);
                });

                //console.log(dataSet);

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('echarts_1'));
                option = {
                    title: {
                        text: '全部分公司统计（单击分公司名查分管所统计）',
                        x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                        y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    },
                    legend: {
                        padding:[35,0,0,0,0]
                    },
                    tooltip: {},
                    dataset: {
                        source: dataSet /*[
                        ['product', '设备数（单位：万）', '超期数（单位：个）', '故障率（百分比：%）'],
                        ['铁东公司', 4.3586, 22, 3.48],
                        ['立山公司', 4.2822, 19, 5.17],
                        ['铁西公司', 6.0416, 32, 6.85],
                        ['千山公司', 6.7609, 36, 1.79],
                        ['铁西开发区公司', 0.1124, 1, 8.36]
                    ]*/
                    },
                    xAxis: {
                        type: 'category',
                        triggerEvent: true
                    },
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {type: 'bar',label: {show: true, position: 'inside'}},
                        {type: 'bar',label: {show: true, position: 'inside'}},
                        {type: 'bar',label: {show: true, position: 'inside'}},
                        {type: 'bar',label: {show: true, position: 'inside'}}
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.on("click", function (param) {
                    if(Array.isArray(param.value)) return;
                    vm.echarts_2(param.value);
                });

                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            });
        },
        echarts_2:function(areaName) {
            $.getJSON(baseURL + "water/water/tdataerr2021/queryAreaUnit", {"areaName":areaName}, function(r){
                let unitSetName = [],unitDeviceCount =[],unitOverCount=[],unitRateErr=[],overDeviceCOunt=[];
                $.each(r,function(index,item){
                    unitSetName.push(item.unitName);
                    unitDeviceCount.push(item.deviceCount/1000);
                    unitOverCount.push(item.overCount);
                    unitRateErr.push(item.rateErr);
                    overDeviceCOunt.push(item.overDeviceCount/1000);
                });
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('echarts_2'));
                option = {
                    title: {
                        text: '【'+areaName + '】各分所统计',
                        x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                        y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // Use axis to trigger tooltip
                            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {
                        padding:[35,0,0,0,0],
                        data: ['设备数（单位：千）', '超期小区数（单位：个）','超期设备数（单位：千）', '故障率（百分比：%）']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data:unitSetName,// ['东长甸所','对炉所','旧堡所','西长甸所','站前所']
                    },
                    series: [
                        {
                            name: '设备数（单位：千）',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: unitDeviceCount//[14.818,8.391,1.732,11.080,7.565]
                        },
                        {
                            name: '超期小区数（单位：个）',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true,
                                formatter: function(params) {
                                    if (params.value===0){
                                        return "";
                                    }
                                    //console.log(params.value);
                                }
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: unitOverCount//[5,6,0,8,3]
                        },
                        {
                            name: '超期设备数（单位：千）',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true,
                                formatter: function(params) {
                                    if (params.value===0){
                                        return "";
                                    }
                                    //console.log(params.value);
                                }
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: overDeviceCOunt//[5,6,0,8,3]
                        },
                        {
                            name: '故障率（百分比：%）',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true,
                                position: 'right',
                                formatter: function(params) {
                                    if (params.value===0){
                                        return "";
                                    }
                                }
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: unitRateErr//[3.27,2.35 ,2.25,5.45,2.51]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            });
        },
        echarts_3:function() {
            $.getJSON(baseURL + "water/water/tdataerr2021/queryDebugger",function(r){
                let dataSet = [["product","",""]];
                $.each(r,function(index,item){
                    if (dataSet[0][1]=="") dataSet[0][1] = item.areaName;
                    if (dataSet[0][2]=="") dataSet[0][2] = item.unitName;

                    let dataItem = [];
                    dataItem.push(item.debugerName);
                    dataItem.push(item.rateErr);
                    dataItem.push(item.ratePro);

                    dataSet.push(dataItem);
                });

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('echarts_3'));

                option = {
                    title: {
                        text: '维护人员最近两个月故障率统计',
                        x:'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                        y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    },
                    legend: {
                        padding:[35,0,0,0]
                    },
                    tooltip: {},
                    dataset: {
                        source: dataSet /*[
                            ['product', '2021-05', '2021-06'],
                            ['李生金', 5.56,2.56],
                            ['罗凯',11.65,9.88],
                            ['苗强',5.45,3,59 ],
                            ['王宏',11.76,9,47],
                            ['喻实',2.32,3,45 ]
                        ]*/
                    },
                    xAxis: [
                        {type: 'category', gridIndex: 0},
                        {type: 'category', gridIndex: 1}
                    ],
                    yAxis: [
                        {gridIndex: 0},
                        {gridIndex: 1}
                    ],
                    grid: [
                        {bottom: '55%'},
                        {top: '55%'}
                    ],
                    series: [
                        // These series are in the first grid.
                        {type: 'bar', seriesLayoutBy: 'row',label: {show: true, position: 'inside'}},
                        {type: 'bar', seriesLayoutBy: 'row',label: {show: true, position: 'inside'}},
                        {type: 'bar', seriesLayoutBy: 'row',label: {show: true, position: 'inside'}},
                        {type: 'bar', seriesLayoutBy: 'row',label: {show: true, position: 'inside'}},
                        {type: 'bar', seriesLayoutBy: 'row',label: {show: true, position: 'inside'}},
                        // These series are in the second grid.
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1,label: {show: true, position: 'inside'}},
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1,label: {show: true, position: 'inside'}}
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            });
        },
        echarts_4:function(){
            $.getJSON(baseURL + "water/water/tdataerr2021/queryOverChart", function(r){
                let over3 = r[0].over3,
                    over6 = r[0].over6,
                    norm = r[0].total - r[0].over3,
                    tt = r[0].total;
                var myChart = echarts.init(document.getElementById('echarts_4'));
                option = {
                    title: {
                        text: '鞍山市服役在线水表统计图',
                        x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                        y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    },
                    label: {//rotate: 'radial',
                        show: true,
                        position: 'inside'
                    },
                    itemStyle: {color: '#61a0a8'},
                    //radius: [0, '95%'],
                    //center: ['50%', '60%'],
                    legend: {padding: [35, 0, 0, 0]},
                    tooltip: {},
                    /*series: {
                        type: 'sunburst',
                        sort: null,
                        label:{
                            formatter: '{b}\n{per|{c}}',
                            rich: {
                                per: {
                                    color:'#fff',
                                    backgroundColor: '#000',
                                    padding: [3, 4],
                                    borderRadius: 4
                                }
                            }
                        },
                        data: [{
                            name: '在线服役',
                            value: tt,
                            label: { rotate: 'tangential'},
                            itemStyle: {color: '#749f83'},
                            children: [ {
                                value: over3,
                                name: '超期3年服役',
                                label: {
                                    rotate: 'tangential',
                                    formatter: '{b}\n{per|{c}}\n'+ Math.round(over3 / tt*100)+'%',
                                    rich: {
                                        per: {
                                            color:'#fff',
                                            backgroundColor: '#000',
                                            padding: [3, 4],
                                            borderRadius: 4
                                        }
                                    }
                                    },
                                children: [{
                                    name: '其中超期6年',
                                    value: over6,
                                    itemStyle: {color: '#2f4554'},
                                    label: {
                                        rotate: 'tangential',
                                        formatter: '{b}\n{per|{c}}\n'
                                            + '分'+Math.round(over6 / over3*100)+'%,'
                                            + '总'+Math.round(over6 / tt*100)+'%',
                                        rich: {
                                            per: {
                                                color:'#fff',
                                                backgroundColor: '#999',
                                                padding: [3, 3],
                                                borderRadius: 4
                                            }
                                        }
                                    },
                                }]
                            },
                                {
                                    value: norm,
                                    name: '未超期',
                                    itemStyle: {color: '#749f83'},
                                    label: {
                                        rotate: 'tangential',
                                        formatter: '{b}\n{per|{c}}\n'+ Math.round(norm / tt*100)+'%',
                                        rich: {
                                            per: {
                                                color:'#fff',
                                                backgroundColor: '#000',
                                                padding: [3, 4],
                                                borderRadius: 4
                                            }
                                        }
                                    },
                                }
                            ]
                        }],
                        /*levels: [
                            {
                            },
                            {
                                label: {
                                    rotate: 'radial'
                                }
                            },
                            {
                                label: {
                                    rotate: 'tangential'
                                }
                            },
                            {
                                label: {
                                    rotate: 0
                                }
                            }
                        ]
                    },*/
                    xAxis: {
                        type: 'category',
                        data: ['总数', '未超期', '超期总数','三年超期', '六年超期']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [tt,norm,over3,over3-over6,over6],
                            type: 'bar',
                        }
                    ]

                };

                myChart.setOption(option);
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            });
        },
        echarts_5:function(){
            $.getJSON(baseURL + "water/water/tdataerr2021/queryYearChart", function(r){
                let data = [['product','水表数','小区数']];
                $.each(r,function(index,item){
                    let it = [];
                    it.push(item.name);
                    it.push(item.metercnt);
                    it.push(item.areacnt);
                    data.push(it);

                });

                var myChart = echarts.init(document.getElementById('echarts_5'));
                option = {
                    title: {
                        text: '水表竣工年份水表数量统计图',
                        x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                        y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    },
                    label: {//rotate: 'radial',
                        show: true,
                        position: 'inside'
                    },
                    //color: ['#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                    //itemStyle: {color: '#61a0a8'},
                    //radius: [0, '95%'],
                    //center: ['50%', '60%'],
                    legend: {padding: [35, 0, 0, 0]},
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                    },
                    yAxis: {
                        type: 'value'
                    },
                    //dimensions: ['product', 'areacnt', 'metercnt'],
                    dataset:{
                        source : data,
                    },
                    series: [
                        {
                            stack: 'total',
                            type: 'bar',
                            label: {
                                show: true,
                                position: 'inside',
                            },
                            itemStyle: {color: '#61a0a8'},
                       },
                        {
                            type:'bar' ,
                            stack: 'total',
                            label: {
                                show: true,
                                position: 'top',
                            }
                        }
                    ]

                };

                myChart.setOption(option);
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            });
        }
    },
    created: function(){

    },
    mounted: function(){
        this.echarts_1();
        this.echarts_2("铁东公司");
        this.echarts_3();
        this.echarts_4();
        this.echarts_5();
    }
});